<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="牛舍名称">{{data.oxtallName}}</a-descriptions-item>
            <a-descriptions-item label="区域名称">{{data.areaName}}</a-descriptions-item>
            <a-descriptions-item label="设备ID">{{data.recordId}}</a-descriptions-item>
            <a-descriptions-item label="设备号">{{data.recordNo}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="信号量"
                  :value="plusation.signalValue"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6" />
            <a-col :span="12" />
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 报表统计 -->
    <a-row :gutter="16">
      <a-col :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          title="最新3s脉动器压力监测数据"
          :body-style="{padding: '16px 6px 0 0'}">
          <v-chart
            ref="ch4Chart"
            style="height: 550px;"
            :option="methaneChartOption"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import {DeviceLuoxunPulsationApi} from '@/api/property/DeviceLuoxunPulsationApi';
import {DeviceLuoxunPulsationDataApi} from "@/api/property/DeviceLuoxunPulsationDataApi";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
]);

provide(THEME_KEY, ChartTheme);

export default {
  name: 'DeviceLuoxunPulsationMonitor',
  components: {
    VChart,
  },
  props: {
    data: Object
  },
  data() {
    return {
      plusation : {},
      plusationContent : {},
      loadDetailTimer : null,
      latestId : 0,
    };
  },
  mounted() {
    this.getLatestOneData();
    this.getDetail();
    this.loadDetailTimer = setInterval(this.getNewData, 9000);
  },
  beforeUnmount() {
    clearInterval(this.loadDetailTimer);
  },
  computed: {
    methaneChartOption(){
      return {
        tooltip: {
          trigger: 'axis',
          formatter:function(params){ // 改鼠标悬浮提示值格式
            console.log(params);
            if (params.length > 1) {
              let relVal = "第" + params[0].name + "点<br/>";
              relVal = relVal + params[0].data.date +"<br/>";
              relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";
              relVal += params[1].seriesName+ ' : ' + (-params[1].value)+"<br/>";
              return relVal;
            } else if (params.length > 0) {
              let relVal = "第" + params[0].name + "点<br/>";
              relVal = relVal + params[0].data.date +"<br/>";
              relVal += params[0].seriesName+ ' : ' + (-params[0].value);
              return relVal;
            }

          }
        },
        legend: {
          data: ['通道A(kpa)', '通道B(kpa)'],
          right: 20
        },
        xAxis: [
          {
            name : "closed",
            type: 'category',
            nameLocation : 'start',
            data : this.plusationContent.xaxis,
            nameTextStyle : {
              color : 'red',
              fontWeight : 'bold',
              fontSize : '15'
            }
          },
        ],
        yAxis:[
          {
            type: 'value',
            show : true,
            max : 127,
            name : "(kpa)open",
            nameTextStyle : {
              color : 'green',
              fontWeight : 'bold',
              fontSize : '15'
            },
            axisLabel:{
              show : true,
              formatter : function(value){
                if (value == 0) {
                  return '';
                } else
                return -value;
              },
            },
            axisTick : {
              show : true
            },
            interval: 15,   // 刻度
            min: -127,
            smooth: true // 平滑曲线
          },
        ],
        series: [
          {
            name: '通道A(kpa)',
            type: 'line',
            smooth: true,
            data: this.plusationContent.a,
          },
          {
            name: '通道B(kpa)',
            type: 'line',
            smooth: true,
            data: this.plusationContent.b,
          }
        ],
        // dataZoom: [{
        //   show: true,
        //   type: 'inside',
        //   filterMode: 'none',
        // }],
      }
    }
  },
  methods: {
    getNewData() {
      let that = this;
      let params =  {
        "recordId" : that.data.recordId,
        "latestId" : that.latestId,
        "orderBy" : "ASC",
        "sortBy" : "upload_time"
      };
      DeviceLuoxunPulsationDataApi.list(params).then(result => {
        let rows = result.data || [];
        let serialsA = that.plusationContent.a;
        let serialsB = that.plusationContent.b;
        let xaxisData = [];
        if (rows.length > 0) {
          for (let i = 0, len = rows.length; i < len; i++) {
            let plusationResultContent = JSON.parse((rows[i].content || "[]"));
            if (plusationResultContent.length > 0) {
              plusationResultContent.forEach(function (item){
                let aItem = {
                  'date' : rows[i].uploadTime,
                  'value' : -1 * item.a
                };
                let bItem = {
                  'date' : rows[i].uploadTime,
                  'value' : -1 * item.b
                };
                serialsA.push(aItem);
                serialsB.push(bItem);
              });
            }
            that.latestId = rows[i].dlpdId;
            console.log(that.latestId);
          }
          console.log(serialsA.length);
          console.log(serialsB.length);
        }
        if (serialsA.length > 288) {
          serialsA = serialsA.splice(serialsA.length - 288);
          serialsB = serialsB.splice(serialsB.length - 288);
        }
        if (serialsA.length > 0) {
          for (let i = 1; i <= serialsA.length; i++) {
            xaxisData.push(i);
          }
        }
        that.plusationContent = {
          a : serialsA,
          b : serialsB,
          xaxis : xaxisData,
        };
      });
    },
    getLatestOneData() {
      let that = this;
      let params =  {
        "recordId" : that.data.recordId,
        "pageNo" : 1,
        "pageSize" : 3,
      };
      DeviceLuoxunPulsationDataApi.findPage(params).then(result => {
        let rows = result.rows || [];
        let serialsA = [];
        let serialsB = [];
        let xaxisData = [];
        if (rows.length > 0) {
          for (let i = rows.length - 1; i >= 0; i--) {
            let plusationResultContent = JSON.parse((rows[i].content || "[]"));
            if (plusationResultContent.length > 0) {
              plusationResultContent.forEach(function (item) {
                let aItem = {
                  'date' : rows[i].uploadTime,
                  'value' : -1 * item.a
                };
                let bItem = {
                  'date' : rows[i].uploadTime,
                  'value' : -1 * item.b
                };
                serialsA.push(aItem);
                serialsB.push(bItem);
              });
            }
            that.latestId = rows[i].dlpdId;
          }
        }
        if (serialsA.length > 0) {
          for (let i = 1; i <= serialsA.length; i++) {
            xaxisData.push(i);
          }
        }
        that.plusationContent = {
          a : serialsA,
          b : serialsB,
          xaxis : xaxisData,
        };
      });
    },
    getDetail() {
      let that = this;
      DeviceLuoxunPulsationApi.detailByRecord(this.data.recordId).then(result => {
        let plusationResult = result || {};
        that.plusation = plusationResult;
      });
    }
  },
  activated() {
    ['ch4Chart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
